<template>
  <div>
    <el-form :model="form" label-width="150px" ref="dataForm">
      <el-form-item label="客服电话" prop="tel" :rules="rules.isRange('1-64')">
        <el-input v-model="form.tel" placeholder="请输入客服电话" maxlength="64" show-word-limit/>
      </el-form-item>
      <el-form-item label="登录页标题" prop="loginTitle" :rules="rules.isRange('1-255')">
        <el-input v-model="form.loginTitle" placeholder="请输入登录页标题" maxlength="255" show-word-limit/>
      </el-form-item>
      <el-form-item label="登录页副标题" prop="loginSubTitle" :rules="rules.isRange('1-255')">
        <el-input v-model="form.loginSubTitle" placeholder="请输入登录页副标题" maxlength="255" show-word-limit/>
      </el-form-item>
      <el-form-item label="登录页背景" prop="loginPic" :rules="rules.isNotNull">
        <el-upload action="" :file-list="loginPicList"
                   :limit=1 list-type="picture" accept="image/*" v-model="form.loginPic"
                   :on-remove="(value) => fileRemove(value, 'loginPic', 'loginPicList')"
                   :http-request="(value) => fileUpload(value, 'loginPic', 'loginPicList')">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传图片文件（宽高比: 1.77:1, 建议为1080/2K/4K）</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="用户协议">
        <div id="userAgreementEditor">
        </div>
      </el-form-item>
      <el-row>
        <el-form-item label="隐私政策">
          <div id="privacyPolicyEditor">
          </div>
        </el-form-item>
      </el-row>
    </el-form>

    <div style="text-align: center">
      <el-button type="primary" icon="el-icon-check" :loading="isDisabled" size="mini"
		  @click.native="saveOrUpdateForm(form, '/sysConfig/save', '/sysConfig/update')">确定</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        rules: this.getRules(),
        isDisabled: false,
        loginPicList: [],
        userAgreementEditor: '',
        privacyPolicyEditor: '',
        form: {
          tel: '',
          loginTitle: '',
          loginSubTitle: '',
          loginPic: '',
          userAgreement: '',
          privacyPolicy: '',
          tenantId: '',
          flag: 1
        }
      }
    },
    mounted () {
      this.init(1)
    },
    methods: {
      saveOrUpdateForm (form, saveUrl, updateUrl) {
        form['userAgreement'] = this.userAgreementEditor.txt.html()
        form['privacyPolicy'] = this.privacyPolicyEditor.txt.html()
        this.saveOrUpdate(form, saveUrl, updateUrl)
      },
      init (id) {
        this.visible = true
        this.isDisabled = false
        this.$nextTick(() => {
          this.userAgreementEditor = this.initMultiText('#userAgreementEditor', this.userAgreementEditor)
          this.userAgreementEditor.create()
          this.privacyPolicyEditor = this.initMultiText('#privacyPolicyEditor', this.privacyPolicyEditor)
          this.privacyPolicyEditor.create()
          this.$refs['dataForm'].resetFields()
        })
        this.form.id = id
        if (id) {
          this.httpGet(`/sysConfig/info/${id}`).then(res => {
            this.form = res.data
            this.loginPicList = this.urlListHandle(this.form.loginPic)
            this.userAgreementEditor.txt.html(this.form.userAgreement)
            this.privacyPolicyEditor.txt.html(this.form.privacyPolicy)
          })
        } else {
          this.loginPicList = []
        }
      }
    }
  }
</script>
